import React from 'react'
import ReactDOM from 'react-dom/client'

import {
  Route,
  Routes,
  Link,
} from 'react-router-dom'
import {
  HistoryRouter, // 路由容器组件 将 redux 状态管理和 react router 集成一起
} from './redux-first-history/rr6'

import {
  Provider,
} from 'react-redux'
import {
  store,
  history, // redux 版本的 history
} from './store'

// 路由组件
import Home from './Home'
import Counter from './Counter'

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <HistoryRouter history={history}>
      <ul>
        <li><Link to="/">首页</Link></li>
        <li><Link to="/counter">计数器</Link></li>
      </ul>
      <Routes>
        <Route path='/' element={<Home></Home>}></Route>
        <Route path='/counter' element={<Counter></Counter>}></Route>
      </Routes>
    </HistoryRouter>
  </Provider>
)
